// app global css in SCSS form
body.body--dark,
body.body--light {
  background-color: var(--a-sur);
  color: var(--a-on-sur);
  --q-primary: var(--a-pri);
  --q-secondary: var(--a-sec);
  --q-accent: var(--a-ter);
  --q-dark: var(--a-sur-c);
  --q-dark-page: var(--a-sur);
  --q-negative: var(--a-err);

  .q-btn.bg-primary {
    color: var(--a-on-pri) !important;
  }

  .q-item__label--header {
    color: var(--a-sec);
  }

  .q-item__label--caption {
    color: var(--a-on-sur-var);
  }

  .q-field--filled .q-field__control {
    background-color: var(--a-sur-c);
  }

  .q-notification.bg-negative {
    color: var(--a-on-err) !important;
  }

  .q-chip,
  .q-menu,
  .q-tab-panels {
    background-color: var(--a-sur-c);
    color: var(--a-on-sur);
  }

  .q-card {
    background-color: var(--a-sur-c);
  }

  .q-tooltip--style {
    --at-apply: 'bg-inv-sur text-inv-on-sur';
  }

  .q-checkbox__svg {
    color: var(--a-on-pri);
  }

  .q-toggle {
    .q-toggle__inner {
      padding: 0.18em 0.16em;
      width: 1.5em;
    }

    .q-toggle__track {
      height: 0.64em;
      border-radius: 1em;
    }

    .q-toggle__thumb {
      top: 0.26em;
      left: 0.26em;
      width: 0.48em;
      height: 0.48em;

      &::after {
        box-shadow: none;
        background-color: var(--a-sur-c);
      }
    }

    .q-toggle__inner--truthy {
      .q-toggle__thumb {
        left: 0.76em;
      }

      .q-toggle__track {
        opacity: 1;
      }

      .q-toggle__thumb::after {
        background-color: var(--a-on-pri);
      }
    }
  }

  .q-item.q-router-link--active,
  .q-item--active {
    --at-apply: 'bg-sec-c text-on-sec-c';
  }

  .q-btn.sm-icon .q-icon,
  .q-btn[sm-icon=""] .q-icon {
    font-size: 1.4em;
    margin-right: 8px;
  }
}

.q-btn--rectangle {
  border-radius: 4px;
}

.q-field--dark:not(.q-field--highlighted) .q-field__label,
.q-field--dark .q-field__marginal,
.q-field--dark .q-field__bottom {
  color: var(--a-on-sur-var);
}

.q-item__section--side {
  color: var(--a-on-sur-var);
}

.q-item__section--avatar {
  color: inherit;
}

:not(pre)>code {
  --at-apply: 'bg-sur-c text-on-sur-var rd px-1 mx-1';
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

[role=dialog] .q-transition--scale-enter-from,
[role=dialog] .q-transition--scale-leave-to {
  transform: scale(0.8);
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/material-symbols-outlined-lite.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

body.desktop {

  @-moz-document url-prefix() {
    * {
      scrollbar-width: thin;
    }
  }

  /* 滚动条整体部分 */
  &::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 6px;
    /* 滚动条宽度 */
    height: 6px;
    /* 滚动条高度 */
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    background-color: var(--a-out-var);
    /* 滑块颜色 */
    border-radius: 2px;
    /* 滑块圆角 */
  }

  /* 鼠标悬停在滑块上时 */
  &::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--a-out-mid);
    /* 悬停时滑块颜色 */
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track,
  *::-webkit-scrollbar-track {
    background: none;
    /* 轨道颜色 */
    border-radius: 2px;
    /* 轨道圆角 */
  }

  /* 滚动条两端按钮 */
  &::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button {
    display: none;
    /* 隐藏滚动条按钮 */
  }

  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}


.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* MD theme override */
body {
  div.md-editor-preview {
    word-break: normal;

    --md-theme-quote-border: 4px solid var(--a-pri) !important;
    --md-theme-link-color: var(--a-pri) !important;
    --md-theme-link-hover-color: var(--a-pri-dim) !important;

    h1 {
      font-size: 1.8em;
    }

    h2 {
      font-size: 1.55em;
    }

    p {
      margin: 1em 0;
    }

    .katex-html {
      overflow-x: auto;
      overflow-y: hidden;
    }

    .md-editor-code-action {
      user-select: none;

      .md-editor-copy-button,
      .md-editor-convert-artifact {
        font-family: 'Material Symbols Outlined';
        line-height: 32px;
        font-size: 16px;
      }

      .md-editor-lang,
      .md-editor-copy-button,
      .md-editor-convert-artifact {
        margin-right: 0 !important;
        padding: 0 4px;
      }

      .md-editor-collapse-tips {
        margin-right: 8px !important;
      }
    }

    router-link {
      --at-apply: 'pri-link cursor-pointer font-600';
    }
  }

  .md-editor-catalog-indicator {
    background-color: var(--a-pri);
    width: 2px;
  }

  .md-editor-catalog-link>span {
    color: var(--a-on-sur-var);

    &:hover {
      color: var(--a-pri-dim);
    }
  }

  .md-editor-catalog-active>span {
    color: var(--a-pri);
  }
}

body #md-editor-v-2-preview-wrapper {
  --at-apply: 'xs:px-4 sm:px-5';
}

.md-editor-dark .md-editor-preview {
  --md-theme-color: var(--a-on-sur-var) !important;
  --md-theme-heading-color: var(--a-on-sur-var) !important;
}
